智能验证集成方式
智能验证是阿里巴巴集团提供的一种验证码解决方案。对大部分正常用户来说,只需一次点击交互即可完成验证码操作。对于您的业务来说,智能验证采用先进的风险分析引擎,有效区分来自人类与机器人的访问行为并拦截机器风险,为您提供安全可靠的业务环境。
前端接入代码集成
在需要使用智能验证功能的Web前端页面中,需要对智能验证进行初始化。以下代码为智能验证功能的前端接入代码示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
<body>
<div id="sc"></div>
<script>
// 实例化ic对象
AWSC.use("ic", function (state, module) {
// 初始化
window.ic = module.init({
// 应用类型标识。它和使用场景标识(scene字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
appkey: "CF_APP_1",
// 使用场景标识。它和应用类型标识(appkey字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。
scene: "nvc_register",
// 声明智能验证需要渲染的目标元素ID。
renderTo: 'sc',
// 验证通过时会触发该回调参数。您可以在该回调参数中将会话ID(sessionId)、签名串(sig)、请求唯一标识(token)字段记录下来,随业务请求一同发送至您的服务端调用验签。
success: function (data) {
window.console && console.log(data.sessionId)
window.console && console.log(data.sig)
window.console && console.log(data.token)
},
// 验证失败时触发该回调参数
fail: function (failCode) {
console.log(failCode)
},
// 验证码加载异常时触发该回调参数
error: function (errorCode) {
console.log(errorCode)
}
});
})
</script>
</body>
</html>
初始化
资源引入
在Web页面中使用滑动验证功能,需要在前端页面代码中添加以下代码,引入所需的JS资源。
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
。初始化代码说明
// 实例化ic对象 AWSC.use("ic", function (state, module) { var icOption = {} // 智能验证的初始化参数对象 // 初始化 调用module.init对智能验证进行初始化 window.ic = module.init(icOption); })
说明初始化
module.init
完成后,会返回一个实例化的ic对象。示例代码中该实例化的ic对象存在window.ic
变量中。初始化参数说明
在前端代码实例化验证组件时提供了以下初始化参数,您可以根据业务需要在代码中调整这些参数。
参数
含义
是否必填
appkey
应用类型标识。它和使用场景标识(scene字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
是
scene
使用场景标识。它和应用类型标识(appkey字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。
是
renderTo
声明智能验证需要渲染的目标元素ID。
是
width
智能验证组件的宽度,默认值300px。强烈建议您将该宽度设置为不小于300px。
否
language
验证组件的语言,默认值为cn(中文)。
否
upLang
二次验证时,用于自定义文案。详细配置方法请参见自定义文案。
否
height
智能验证组件的高度,默认值42px。强烈建议您将该高度设置为不小于42px。
否
default_txt
智能验证组件初始状态文案。
否
success_txt
智能验证组件验证通过状态文案。
否
fail_txt
智能验证组件验证失败(拦截)状态文案。
否
scanning_txt
智能验证组件验证中状态文案。
否
test
测试字段,用于测试验证码的不同状态。
否
success
前端智能验证通过时会触发该回调函数。您可以在该回调参数中将请求标识会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
否
fail
智能验证失败时会触发该回调函数。
否
error
智能验证出现错误时触发该回调函数。
否
测试
在将前端接入代码集成至Web页面后,建议您在正式上线前通过以下方法进行测试。
通过设定初始化参数test的值复现智能现验证各个状态工作机制
您可以通过将test字段值设置为智能验证服务提供的不同内容,来测智能试验证各个状态的效果。通过配置前端页面初始化代码中的test字段来直接控制智能验证服务接口的返回结果(通过、拦截)。
test字段值
模拟效果
module.TEST_PASS
智能验证通过
module.TEST_BLOCK
智能验证未通过,直接拦截
module.TEST_NC_PASS
唤醒滑动验证,且滑动验证通过
module.TEST_NC_BLOCK
唤醒滑动验证,且滑动验证不通过
说明前缀
module
为AWSC.use
返回的对象,示例代码中命名为module
。新版集成代码中token是自动生成的,无需用户自行指定token。如果您在正式上线或进行完整的功能性测试时未提前删除test配置项,会导致token异常,从而可能导致集成操作中某个环节出现异常,例如:验签失败等。
通过这样的方式,您可以直观地观察验证码各个状态的交互、样式和流程。
测试代码示例:
AWSC.use("ic", function (state, module) { window.ic = module.init({ ... ... // 该配置项为测试项 在仅用来测试验证码不同状态时使用。上线时请将其删除. 智能验证test配置项有4种不同的值对应不同的验证码状态,具体请参考文中参数定义说明部分。 test: module.TEST_PASS, // 测试智能验证通过 // test: module.TEST_BLOCK, // 测试智能验证失败 // test: module.TEST_NC_PASS, // 唤醒滑动验证并验证通过 // test: module.TEST_NC_BLOCK, // 唤醒滑动验证并验证失败 ... ... }); })
在正式上线前,建议您执行完整的功能性测试和兼容性测试。在测试过程中,请注意:
确保测试过程中,使用阿里云验证码控制台中为您分配的appkey和scene值进行测试。
对于Internet Explorer浏览器,验证组件最低支持至Internet Explorer 9,Internet Explorer 8及以下不支持。
在完整的功能性测试时,若成功调用获取的token包含CF_APP_1的内容,请检查test配置项是否删除,避免导致完整功能性测试失败。
对生成的ic对象进一步操作说明
初始化module.init
完成之后,我们会返回一个实例化的ic对象,示例代码中存在window.ic
变量中。在该对象中我们提供例一些方法,您可以按需对返回的ic对象进行进一步的操作。调用方式为window.ic[方法名]
。
方法名 | 参数 | 作用 |
reset | 无 | 任何时候调用此方法,可以将智能验证重置为初始状态(即等待交互状态)。 |